<template>
	<div>
		<basic-container>
			<back-title @goBack="goBack" :title="isDetailShow ? '质检规则详情' : '新建质检规则'" v-if="isAddShow || isDetailShow" />
			<div class="madp-inspection" v-show="!isAddShow && !isDetailShow">
				<el-form :model="refForm" ref="refForm" :inline="true">
					<div class="madp-inspection-search">
						<div class="madp-inspection-search-item">
							<div>
								<el-row>
									<el-col :span="10">
										<el-form-item label="规则名称:" prop="name">
											<el-input type="text" placeholder="请输入规则名称" v-model.trim="refForm.name"></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="14">
										<el-form-item label="创建人:" prop="name">
											<el-input type="text" placeholder="请输入创建人名称" v-model.trim="refForm.creator"></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="10">
										<el-form-item label="是否开启:" prop="isOpen">
											<el-select v-model="refForm.isOpen">
												<el-option :key="1" label="开启" :value="true">开启</el-option>
												<el-option :key="2" label="关闭" :value="false">关闭</el-option>
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :span="14">
										<el-form-item prop="date" label="创建时间:">
											<el-date-picker
												v-model="refForm.date"
												type="daterange"
												value-format="yyyy-MM-dd"
												range-separator="至"
												start-placeholder="开始日期"
												end-placeholder="结束日期"
												:picker-options="{
													disabledDate(time) {
														return time.getTime() > Date.now();
													},
												}"
											></el-date-picker>
										</el-form-item>
									</el-col>
								</el-row>
							</div>
						</div>
						<el-form-item>
							<div class="madp-inspection-search-btn">
								<el-button type="primary" @click="searchFn">搜索</el-button>
								<el-button @click="clearFn">清空</el-button>
							</div>
						</el-form-item>
					</div>
				</el-form>
				<div class="madp-inspection-btn">
					<el-button type="primary" @click="addNewRule">新建规则</el-button>
				</div>
				<div class="madp-inspection-table madp-mt">
					<el-table
						:data="tableData"
						:header-cell-style="{
							background: 'rgb(255, 191, 191)',
							color: 'rgb(44,44,44)',
						}"
						stripe
					>
						<el-table-column label="规则名称" prop="name" align="center"></el-table-column>
						<el-table-column label="创建人" prop="owner" align="center"></el-table-column>
						<el-table-column label="创建时间" prop="createTime" align="center"></el-table-column>
						<el-table-column label="质检群聊" prop="rooms" align="center">
							<template slot-scope="scope">
								<div class="madp-table-chat" v-if="scope.row.rooms && scope.row.rooms.length > 0">
									<el-popover placement="top-start" width="200" trigger="hover">
										<div>
											<el-tag type="primary" v-for="(item, index) in scope.row.rooms" :key="index">{{ item.name }}</el-tag>
										</div>
										<div slot="reference">
											<el-tag type="primary" v-for="(item, index) in scope.row.rooms ? scope.row.rooms.slice(0, 2) : []" :key="index">{{ item.name }}</el-tag>
											<el-tag type="primary" v-if="scope.row.rooms && scope.row.rooms.length > 2">...</el-tag>
										</div>
									</el-popover>
								</div>
								<div v-else>--</div>
							</template>
						</el-table-column>
						<el-table-column label="开启状态" prop="isOpen" align="center">
							<template slot-scope="scope">
								<el-switch @change="getChangeStatus(scope.row.id)" v-model="scope.row.isOpen" :active-value="true" :inactive-value="false"></el-switch>
							</template>
						</el-table-column>
						<el-table-column label="操作" align="center">
							<template slot-scope="scope">
								<div>
									<el-button type="text" @click="onDetailShow(scope.row)">查看</el-button>
									<el-button type="text" @click="updateRule(scope.row)">修改</el-button>
									<el-button type="text" @click="delectRule(scope.row.id)">删除</el-button>
								</div>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="madp-inspection-pagination madp-mt">
					<el-pagination
						background
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page.sync="page.current"
						:page-sizes="[10, 20, 30, 50, 100]"
						:page-size="page.size"
						layout="total, sizes, prev, pager, next, jumper"
						:total="page.total"
					></el-pagination>
				</div>
			</div>
			<div class="madp-pt" v-if="isAddShow">
				<add-rule @addSuccess="addSuccessDo" :type="rulesType" :currentRules="row"></add-rule>
			</div>
			<div class="madp-pt" v-if="isDetailShow">
				<rule-detail :currentData="rowData"></rule-detail>
			</div>
		</basic-container>
	</div>
</template>

<script>
import BackTitle from '@/components/back-title/';
import AddRule from './add-rule.vue';
import RuleDetail from './rule-detail.vue';
import {
	queryInspection, //获取列表
	delectInspection, //删除列表
	changeStatus, //切换状态
	checkInspection, //查看列表
} from '@/api/operation-manage/group-chat-inspection';
export default {
	components: {
		AddRule,
		BackTitle,
		RuleDetail,
	},
	data() {
		return {
			row: {},
			rulesType: '',
			rowData: {},
			refForm: {
				name: '',
				creator: '',
				date: [],
				isOpen: undefined,
			},
			tableData: [],
			page: {
				current: 1,
				size: 10,
				total: 0,
			},
			isAddShow: false,
			isDetailShow: false,
		};
	},
	mounted() {
		this.getTableInfo();
	},
	methods: {
		delectRule(id) {
			this.$confirm('确认是否删除?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					delectInspection({ id }).then((res) => {
						if (res.data && res.data.code === 0) {
							this.$message({
								type: 'success',
								message: '删除成功!',
							});
							this.getTableInfo();
						}
					});
				})
				.catch(() => {});
		},
		updateRule(row) {
			this.row = row;
			this.rulesType = 'update';
			this.isAddShow = true;
		},
		addSuccessDo() {
			this.isAddShow = false;
			this.getTableInfo();
		},
		getChangeStatus(id) {
			changeStatus({ ruleId: id }).then((res) => {
				if (res.data && res.data.code === 0) {
					this.getTableInfo();
					this.$message({
						type: 'success',
						message: '切换成功!',
					});
					console.log('changeStatus', res);
				}
			});
		},
		goBack() {
			this.isAddShow = false;
			this.isDetailShow = false;
		},
		//
		addNewRule() {
			this.row = {};
			this.rulesType = 'add';
			this.isAddShow = true;
		},
		onDetailShow(row) {
			this.rowData = row;
			console.log('row', row);
			this.isDetailShow = true;
		},
		handleSizeChange(val) {
			this.page = {
				current: 1,
				size: val,
				total: 0,
			};
			this.getTableInfo();
		},
		handleCurrentChange(val) {
			this.page = {
				current: val,
				size: 10,
				total: 0,
			};
			this.getTableInfo();
		},
		searchFn() {
			this.page = {
				current: 1,
				size: 10,
				total: 0,
			};
			this.getTableInfo();
		},
		clearFn() {
			this.page = {
				current: 1,
				size: 10,
				total: 0,
			};
			this.refForm = {
				name: '',
				creator: '',
				isOpen: undefined,
				date: [],
			};
			this.getTableInfo();
		},
		getTableInfo() {
			const { name, creator, isOpen, date } = this.refForm;
			const params = {
				name,
				creator,
				isOpen,
				startTime: date[0] && date[0],
				endTime: date[1] && date[1],
				current: this.page.current,
				size: this.page.size,
			};
			queryInspection(params).then((res) => {
				if (res.data && res.data.code === 0) {
					this.tableData = res.data.data.records;
					this.page.total = res.data.data.total;
					console.log('queryInspection', res);
				}
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.madp-inspection {
	&-search,
	&-pagination {
		display: flex;
		justify-content: flex-end;
	}
	&-search {
		&-item {
			display: flex;
		}
		&-btn {
			display: flex;
		}
		/deep/.el-date-editor .el-range-separator {
			width: 25px;
		}
	}
}
.madp-mt {
	margin-top: 20px;
}
.madp-pt {
	padding-top: 50px;
}
.el-tag {
	margin: 2px;
}
</style>
